<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">热榜</el-menu-item>
      <el-menu-item index="2">周榜</el-menu-item>
    </el-menu>
    <div>
      <ul>
        <li
          v-for="(video,index) in ranking"
          :key="index"
        >{{video.description}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "rankings",
  data() {
    return {
      activeIndex: "1",
      ranking: [
        {
          id: 1,
          description: "神十六返航全程回顾",
        },
        {
          id: 2,
          description: "神十六航天员平安抵京",
        },
        {
          id: 3,
          description: "小麦的弟弟叫小穗",
        },
        {
          id: 4,
          description: "黄永宏：亚洲",
        },
        {
          id: 5,
          description: "haha",
        },
        {
          id: 6,
          description: "haha",
        },
        {
          id: 7,
          description: "haha",
        },
        {
          id: 8,
          description: "haha",
        },
        {
          id: 9,
          description: "haha",
        },
        {
          id: 10,
          description: "haha",
        },
      ],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeIndex = key.toString();
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
::v-deep .el-menu-item {
  height: 45px;
  line-height: 45px;
}
</style>